<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>月度考核管理</title>
<link href="/static/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/static/css/cb.css" rel="stylesheet" type="text/css" />
<link href="/static/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="/static/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/static/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css"
	href="/static/js/laypage/skin/laypage.css" />

<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
<script src="/static/js/vue/vue.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/static/js/laypage/laypage.js"></script>
<script type="text/javascript" src="/static/laydate/laydate.js"></script>
<script type="text/javascript" src="/static/js/examine.js"></script>
</head>
<body>
	<div id="app">
		<table width="99%" border="0" align="center" cellpadding="0"
			cellspacing="0">
			<tr>
				<td width="1%" align="left" background="/static/images/b2.jpg"><img
					src="/static/images/b1.jpg" width="10" height="26" /></td>
				<td width="68%" background="/static/images/b2.jpg"><table width="124"
						border="0" align="left" cellpadding="0" cellspacing="0">
						<tr>
							<td width="20" align="left"><img src="/static/images/tz.gif"
								width="10" height="16" /></td>
							<td width="104" align="left" class="biao">查找月度考核信息</td>
						</tr>
					</table></td>
				<td width="31%" align="right" background="/static/images/b2.jpg"><img
					src="/static/images/b3.jpg" width="9" height="26" /></td>
			</tr>
		</table>
		<table width="99%" border="0" align="center" cellpadding="3"
			cellspacing="1" bgcolor="#AEDEF4">
			<tr>
				<td align="center" bgcolor="#E2F7FE">
					<form id="form1" name="form1" method="post" action="">
						<table width="80%" border="0" cellspacing="1" cellpadding="3">
							<tr>
								<td width="10%" align="right">矫正单位:</td>
								<td width="10%" align="left"><input type="text" id="cunit"
									size="15" /></td>
								<td width="10%" align="right">姓名:</td>
								<td width="10%" align="left"><input type="text" id="cname"
									size="15" /></td>
								<td width="10%" align="right">考核月份:</td>
								<td width="10%" align="left"><input placeholder="请选择月份"
									class="laydate-icon" onclick="laydate()" id="cmonth" /></td>
								<td width="10%" align="right">考核等级:</td>
								<td width="10%" align="left"><select
									style="width: 170px; height: 30px" id="clevel">
										<option value="">任意</option>
										<option value="优秀">优秀</option>
										<option value="良好">良好</option>
										<option value="一般">一般</option>
										<option value="差">差</option>
								</select></td>
								<td width="5%" align="center"><input type="button"
									onclick="queryMonthTest()" value="查找" /></td>
								<td width="35%" align="center"><input type="button"
									onclick="addMonthTest()" value="增加记录" /> <input type="button"
									onclick="downloadMonthTest()" value="导出Excel" /></td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
		</table>

		<table width="50%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td height="5" style="color: red" ></td>
			</tr>
		</table>
		<table width="99%" border="0" align="center" cellpadding="0"
			cellspacing="0">
			<tr>
				<td width="1%" align="left" background="/static/images/b2.jpg"><img
					src="/static/images/b1.jpg" width="10" height="26" /></td>
				<td width="68%" background="/static/images/b2.jpg"><table width="124"
						border="0" align="left" cellpadding="0" cellspacing="0">
						<tr>
							<td width="20" align="left"><img src="/static/images/tz.gif"
								width="10" height="16" /></td>
							<td width="104" align="left" class="biao">月度考核信息列表</td>
						</tr>
					</table></td>
				<td width="31%" align="right" background="/static/images/b2.jpg"><img
					src="/static/images/b3.jpg" width="9" height="26" /></td>
			</tr>
		</table>
		<table width="99%" border="0" align="center" cellpadding="3"
			cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4">
			<thead>
				<tr>
					<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
					<td align="center" bgcolor="#EFFBFE">矫正单位</td>
					<td align="center" bgcolor="#EFFBFE">姓名</td>
					<td align="center" bgcolor="#EFFBFE">考核月份</td>
					<td align="center" bgcolor="#EFFBFE">考核得分</td>
					<td align="center" bgcolor="#EFFBFE">考核等级</td>
					<td align="center" bgcolor="#EFFBFE">管理操作</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in result"
					onmouseout="this.style.backgroundColor='#ffffff'" bgcolor="#ffffff"
					onmouseover="this.style.backgroundColor='#E6F2FF'">
					<td height="25" align="center"><input name="id[]" value=""
						type="checkbox" />{{index+1}}</td>
					<td align="center" class="t5"><div align="center">
							<strong>{{item.jname}}</strong>
						</div></td>
					<td align="center">{{item.cname}}</td>
					<td align="center">{{item.month}}</td>
					<td align="center">{{item.points}}</td>
					<td align="center">{{item.level}}</td>
					<td align="left">
						<div align="left" style="padding-left: 5px">
							<div align="center">
								<input type="button" @click="checkMonthTest(item.id)" value="查看" />
								<input type="button" @click="editMonthTest(item.id)" value="修改" />
								<input type="button" @click="delMonthTest(item.id)" value="删除" />
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="7" align="center">
						<div id="pagediv" class="easyui-pagination"></div>
					</td>
				</tr>
			</tbody>
		</table>

		<!-- 增加月度考核记录弹出框 -->
		<div class="float:left" id="addmonthtest" style="background-color: #AEDEF4"></div>
		<!-- 查看月度考核记录弹出框 -->
		<div id="checkmonthtest" style="background-color: #AEDEF4"></div>
		<!-- 修改月度考核记录弹出框 -->
		<div id="editmonthtest" style="background-color: #AEDEF4"></div>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el : '#app',
		data : {
			result : []
		}
	});
	//获取月度考核记录列表
	getMonthTestList();
	
</script>
<script type="text/javascript">
	var load = function() {
		$.ajax({
			url : "/rulebreak/gettimes",
			type : "get",
			dataType : "json",
			success : function(result) {
				var dataAxis = result.date;
				var data = result.times;
				var yMax = 500;
				var dataShadow = [];

				for (var i = 0; i < data.length; i++) {
				    dataShadow.push(yMax);
				}

				option = {
				    title: {
				        text: '特性示例：渐变色 阴影 点击缩放',
				        subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
				    },
				    xAxis: {
				        data: dataAxis,
				        axisLabel: {
				            inside: true,
				            textStyle: {
				                color: '#fff'
				            }
				        },
				        axisTick: {
				            show: false
				        },
				        axisLine: {
				            show: false
				        },
				        z: 10
				    },
				    yAxis: {
				        axisLine: {
				            show: false
				        },
				        axisTick: {
				            show: false
				        },
				        axisLabel: {
				            textStyle: {
				                color: '#999'
				            }
				        }
				    },
				    dataZoom: [
				        {
				            type: 'inside'
				        }
				    ],
				    series: [
				        { // For shadow
				            type: 'bar',
				            itemStyle: {
				                normal: {color: 'rgba(0,0,0,0.05)'}
				            },
				            barGap:'-100%',
				            barCategoryGap:'40%',
				            data: dataShadow,
				            animation: false
				        },
				        {
				            type: 'bar',
				            itemStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#83bff6'},
				                            {offset: 0.5, color: '#188df0'},
				                            {offset: 1, color: '#188df0'}
				                        ]
				                    )
				                },
				                emphasis: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#2378f7'},
				                            {offset: 0.7, color: '#2378f7'},
				                            {offset: 1, color: '#83bff6'}
				                        ]
				                    )
				                }
				            },
				            data: data
				        }
				    ]
				};

				// Enable data zoom when user click bar.
				var zoomSize = 6;
				myChart.on('click', function (params) {
				    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
				    myChart.dispatchAction({
				        type: 'dataZoom',
				        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
				        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
				    });
				});
			}
		})
	}
 	load();
        
    </script>
</html>